<template>
	<!--订单详情-->
	<view class="page-content">
		<view class="page-top">
			<!--订单详情信息-->
			<order-top-info :obj="objdata.address" :is_copy="true"></order-top-info>
			<!--橱窗-->
			<view class="page-top-box" v-if="!unfold">
				<block v-for="(item,index) in objdata.order_list.slice(0,1)" :key="index">
				<product-number :pageType="pageType" :obj="item" :unfold="!unfold"></product-number>
				</block>
			</view>
			<view class="page-top-box" v-else>
				<block v-for="(item,index) in objdata.order_list" :key="index">
				  <product-number :pageType="pageType" :obj="item" :unfold="!unfold"></product-number>
				</block>
			</view>
			<view class="loadMore" @click="checkmore">{{unfold==false?'展开':'收缩'}}
			    <view class="icons icon-gengduo" :class="unfold==false ? 'sel-input-icon2':'sel-input-icon'"></view>
			</view>
		</view>
		<view class="page-body">
			<!--流程-->
			<view class="page-body-title">流程</view>
			<flow-path :objlist="objdata.order_flow" @todet="todet"></flow-path>
		</view>
		<!--审批-->
		<view class="page-foot1" v-if="page_type==='2' && objdata2.type === 1 && objdata2.status === 1">
			<view class="page-foot-l"  >
				<!--指派-->
			    <template v-if="objdata2.user.length>0">
					 <block v-for="(ite,ind) in objdata2.user" :key="ind">
					 	<view class="box-foot-l" v-if="ite.img != ''"  @click.stop="todes">
					 		<image class="box-foot-l-img" :src="ite.img || $mAssetsPath.icon_mrtx"></image>
					 	</view>
					 </block>
				</template>
				<view class="box-foot-l" v-else-if="objdata2.user.length===0 && objdata2.next_user === '' && objdata2.next_type !== 0 " @click.stop="todes">
					<view class="box-foot-l-b">+</view>
				</view>
				<view class="box-foot-l"  v-else-if="(objdata2.user.length===0 && objdata2.next_user !== '') || (objdata2.user.length===0 && objdata2.next_type === 0)"></view>
			</view>
			<view class="page-foot-r">
				<view class="page-foot-r-b" @click="toreject(objdata2.id,objdata2.next_user,objdata2.next_type)">驳回</view>
				<view class="page-foot-r-t" @click="topost(objdata2.id,objdata2.next_user,objdata2.next_type)">通过</view>
			</view>
		</view>
		<view class="page-foot2" v-if="page_type==='1' || page_type==='4'">
			<view class="page-foot-but" @click.stop="toOrder(objdata2.id,objdata2.type,objdata2.flow_path_id)">再下一单</view>
		</view>
		<view class="page-foot2" v-if="page_type==='3'&& (is_user === objdata2.orderInfo.uid)">
			<view class="page-foot-but" @click.stop="toOrder(objdata2.order_id,objdata2.orderInfo.type,objdata2.flow_path_id)">再下一单</view>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit" v-if="tipType===1 || tipType===2">操作：{{tipType===1?'通过':tipType===2?'驳回':''}}</view>
				<view class="w-con">
					<view class="input-row" v-if="tipType===1 || tipType===2">
						<textarea class="input-row-w" v-model="params.mark" placeholder="批注:（非必填）" />
					</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		orderLists, //进行中、我的下单
		approvalOrderLists, //待审批、已审批订单
		assignUsers, //指派/驳回
		setSuppliers, //指派供应商
		orderInfos, //订单详情
		assignSuppliers, //供应商管理员指派供应商
		approvalSuppliers, //供应商员工通过驳回操作
		rejects, //驳回
	} from '@/common/api.js';
	import orderTopInfo from '@/pages/components/order_top_info.vue'; //工作动态
	import productNumber from '@/pages/components/product_number.vue'; //橱窗
	import flowPath from '@/pages/components/flow_path.vue'; //橱窗
	import wPopup from '@/components/w-popup/w-popup2.vue'; // 编辑框
	export default{
		components: {
			orderTopInfo,productNumber,flowPath,wPopup
		},
		data() {
			return {
				is_user:0,
				unfold:false, //是否查看更多
				objdata3:{
					head_img:'',
				},
				page_type:'',
				order_id:'',
				objdata:{
					address:{
						user_name: '',
						mobile: '',
						site: '',
					},
					order_flow:[],
					order_list:[],
					user:[]
				},
				objdata2:{
					
				},
				objlist:[{
					head_img:'/static/data-img/data-tx.png',
					name:'刘星',
					post:'采购员',
					postil:'你好这个订单是在元旦节前要用到你好这个订单是在元旦节前要用到',
					statu:1
				},{
					head_img:'/static/data-img/data-tx.png',
					name:'刘星',
					post:'采购员',
					postil:'你好这个订单是在元旦节前要用到你好这个订单是在元旦节前要用到',
					statu:2
				},{
					head_img:'/static/data-img/data-tx.png',
					name:'刘星',
					post:'采购员',
					postil:'你好这个订单是在元旦节前要用到你好这个订单是在元旦节前要用到',
					statu:3
				},{
					head_img:'/static/data-img/data-tx.png',
					name:'刘星',
					post:'采购员',
					postil:'你好这个订单是在元旦节前要用到你好这个订单是在元旦节前要用到',
					statu:4
				}],
				params:{
					id:0,
					flow_status:'',
					mark:'',
					uid:'',
					name:'',
					supplier_id:'', //供应商组别id
					to_user:'', //要转发的供应商id 多个按逗号分隔
				},
				sel_type:'',
				tipType: 0, // 1-通过 2-驳回
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onShow() {
			this.is_user = this.userInfo.uid;
		},
		onLoad(option) {
			console.log(222,option)
			if(option.pageType){
				if(option.pageType === '1'){
					this.pageType = 'pop';
				}else if(option.pageType === '2'){
					this.pageType = 'prop';
				}
			}
			if(option.page_type){
				this.page_type = option.page_type;
				if(option.row){
					const objdata = JSON.parse(option.row)
					if(this.page_type === '1' || this.page_type === '4' ){
						this.order_id = objdata.id;
						this.objdata2 = objdata;
					}else if(this.page_type === '2' || this.page_type === '3'){
						this.order_id = objdata.order_id;
						this.objdata2 = objdata;
					}
					console.log(2222,this.objdata2)
				}
			}
			this.getList();
		},
		methods:{
			//跳转流程记录
			todet(list){
				let lists = JSON.stringify(list)
				uni.navigateTo({
					url:`/pages/work/flowDetail?list=${lists}`
				})
			},
			//跳转再下一单
			toOrder(id,type,flow_path_id){
				if(type=== 1){
					uni.navigateTo({
						url: `/pages/order/PropCreateOrder?pageType=pop&order_id=${id}&flow_path_id=${flow_path_id}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/order/PropCreateOrder?pageType=prop&order_id=${id}&flow_path_id=${flow_path_id}`
					})
				}
			},
			//驳回
			toreject(id,next_user,next_type){
				/* if(!!next_user){
					
				}else if(next_type===0){
					
				}else{
					if(this.params.uid === ''){
						uni.showToast({
							title:'请先指派人员！',
							icon:'none',
							duration:2000
						})
						return
					}
				} */
				this.params.mark = '';
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.tipType = 2;
			},
			//通过
			topost(id,next_user,next_type){
				console.log(55,id,next_user,next_type)
				if(!!next_user){
					
				}else if(next_type===0){
					
				}else{
					if(this.params.uid === ''){
						uni.showToast({
							title:'请先指派人员！',
							icon:'none',
							duration:2000
						})
						return
					}
				}
				this.params.mark = '';
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.tipType = 1;
			},
			//通过/驳回
			confirm(){
				this.params.id = this.objdata2.id;
				if(this.tipType === 1){ //通过
				this.params.flow_status = 1; //通过
				   if(!!this.objdata2.next_user){ // 不为空为供应商成员 通过状态
				   const {id,flow_status,mark} = this.params;
					   approvalSuppliers({id,flow_status,mark}).then(res=>{
						   if(res.code === 2000){
						   	uni.showToast({
						   		title:'指派成功！',
						   		icon:'none',
						   		duration:2000
						   	})
							this.getList()
						   }else{
						   	uni.showToast({
						   		title:res.msg,
						   		icon:'none',
						   		duration:2000
						   	})
						   }
					   })
				   }else  if(this.objdata2.next_type===0){ // 不为空为供应商成员 通过状态
				   this.params.uid = ''
				   const {id,flow_status,mark,uid} = this.params
					   assignUsers({id,flow_status,mark,uid}).then(res=>{
						   if(res.code === 2000){
						   	uni.showToast({
						   		title:'已通过！',
						   		icon:'none',
						   		duration:2000
						   	})
							this.getList()
						   }else{
						   	uni.showToast({
						   		title:res.msg,
						   		icon:'none',
						   		duration:2000
						   	})
						   }
					   })
				   }else{
					   if(this.sel_type === 'c'){ //公司-公司
					   	const {id,flow_status,mark,uid} = this.params
					   	assignUsers({id,flow_status,mark,uid}).then(res=>{
					   		if(res.code === 2000){
					   			uni.showToast({
					   				title:'指派成功！',
					   				icon:'none',
					   				duration:2000
					   			})
								this.getList()
					   		}else{
					   			uni.showToast({
					   				title:res.msg,
					   				icon:'none',
					   				duration:2000
					   			})
					   		}
					   	})
					   }else if(this.sel_type === 'd'){ //公司-供应商
					   	const {id,supplier_id,uid,flow_status,mark} = this.params
					   	setSuppliers({id,supplier_id,uid,flow_status,mark}).then(res=>{
					   		if(res.code === 2000){
					   			uni.showToast({
					   				title:'指派成功！',
					   				icon:'none',
					   				duration:2000
					   			})
								this.getList()
					   		}else{
					   			uni.showToast({
					   				title:res.msg,
					   				icon:'none',
					   				duration:2000
					   			})
					   		}
					   	})
					   }else if(this.sel_type === 'e'){ //供应商-公司
					   	const {id,to_user,flow_status,mark} = this.params;
					   	assignSuppliers({id,to_user,flow_status,mark}).then(res=>{
					   		if(res.code === 2000){
					   			uni.showToast({
					   				title:'指派成功！',
					   				icon:'none',
					   				duration:2000
					   			})
								this.getList()
					   		}else{
					   			uni.showToast({
					   				title:res.msg,
					   				icon:'none',
					   				duration:2000
					   			})
					   		}
					   	})
					   }
				   }
				}else if(this.tipType === 2){//驳回
				    const {id,mark} = this.params;
					rejects({id,mark}).then(res=>{
						if(res.code === 2000){
							uni.showToast({
								title:'驳回成功！',
								icon:'none',
								duration:2000
							})
							this.getList()
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
					/* this.params.flow_status = 2; //驳回
					if(!!this.objdata2.next_user){ // 不为空为供应商成员 通过状态
					const {id,flow_status,mark} = this.params
					approvalSuppliers({id,flow_status,mark}).then(res=>{
						if(res.code === 2000){
							uni.showToast({
								title:'驳回成功！',
								icon:'none',
								duration:2000
							})
							this.getList()
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
					}else  if(this.objdata2.next_type===0){ // 不为空为供应商成员 通过状态
					this.params.uid = ''
					const {id,flow_status,mark,uid} = this.params;
						assignUsers({id,flow_status,mark,uid}).then(res=>{
							if(res.code === 2000){
								uni.showToast({
									title:'驳回成功！',
									icon:'none',
									duration:2000
								})
								this.getList()
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none',
									duration:2000
								})
							}
						})				  
					}else{
						if(this.sel_type === 'c'){ //公司-公司
							const {id,flow_status,mark,uid} = this.params
							assignUsers({id,flow_status,mark,uid}).then(res=>{
								if(res.code === 2000){
									uni.showToast({
										title:'驳回成功！',
										icon:'none',
										duration:2000
									})
									this.getList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none',
										duration:2000
									})
								}
							})
						}else if(this.sel_type === 'd'){ //公司-供应商
							const {id,supplier_id,uid,flow_status,mark} = this.params
							setSuppliers({id,supplier_id,uid,flow_status,mark}).then(res=>{
								if(res.code === 2000){
									uni.showToast({
										title:'驳回成功！',
										icon:'none',
										duration:2000
									})
									this.getList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none',
										duration:2000
									})
								}
							})
						}else if(this.sel_type === 'e'){ //供应商-公司
							const {id,to_user,flow_status,mark} = this.params;
							assignSuppliers({id,to_user,flow_status,mark}).then(res=>{
								if(res.code === 2000){
									uni.showToast({
										title:'驳回成功！',
										icon:'none',
										duration:2000
									})
									this.getList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none',
										duration:2000
									})
								}
							})
						}
					} */
				}
				this.showtip = false;
				this.objdata2.status = 2;
				this.page_type === '3';
			},
			//指派用户返回数据
			resdata2(type,id,row){
				console.log(11,type,id,row,this.objdata2)
				this.sel_type = type;
				this.objdata2.user = row;
				if(type === 'c'){
					this.params.id = parseInt(id);
					this.params.uid = row[0].uid;
				}else if(type === 'd'){
					this.params.id = parseInt(id);
					this.params.supplier_id = row[0].group_id;
					this.params.uid = row[0].uid;
				}else if(type === 'e'){
					this.params.id = parseInt(id);
					let to_user = '';
					if(row && row.length>0){
						row.forEach(item=>{
							if(to_user === ''){
								to_user += item.uid
							}else{
								to_user += ',' + item.uid
							}
						})
					}
					this.params.to_user = to_user;
					this.params.uid = to_user;
				}
			},
			//调整指派人员页面
			todes(){
				console.log(333,this.objdata2)
				if(this.objdata2.user_type === 1 && this.objdata2.next_type === 1){ //指派公司成员
				console.log('c')
					uni.navigateTo({
						url: `/pages/designate/des_two?id=${this.objdata2.id}&flow_path_id=${this.objdata2.flow_path_id}&type=c`
					})
				}else if(this.objdata2.user_type === 1 && this.objdata2.next_type === 2){ //指派供应商管理员
				console.log('d')
					uni.navigateTo({
						url: `/pages/designate/des_two?id=${this.objdata2.id}&flow_path_id=${this.objdata2.flow_path_id}&type=d`
					})
				}else if(this.objdata2.user_type === 2 && this.objdata2.next_type === 2){ //指派供应商成员
				console.log('e')
					uni.navigateTo({
						url: `/pages/designate/des_two?id=${this.objdata2.id}&flow_path_id=${this.objdata2.flow_path_id}&type=e`
					})
				}else if(this.objdata2.user_type === 2 && this.objdata2.next_type === 1){ //指派供应商成员
				console.log('f')
					uni.navigateTo({
						url: `/pages/designate/des_two?id=${this.objdata2.id}&flow_path_id=${this.objdata2.flow_path_id}&type=c`
					})
				}
			},
			getList(){
				orderInfos({order_id:this.order_id}).then(res=>{
					if(res.code === 2000){
						const {address,order_flow,order_list} = res.data;
						this.objdata.address = address;
						this.objdata.order_flow = order_flow;
						let objlist = []
						if(order_list && order_list.length>0){
							order_list.forEach(item=>{
								let datalist = [];
								let textures = [];
								this.$set(item, 'datalist', datalist)
								this.$set(item, 'textures', textures)
								if(item.data && item.data.length>0){
									item.data.forEach(item2=>{
										console.log(1111,item2)
										if(item2.coding_name !== '定制'){
											if (item2.top_id === 0) {
												item.datalist.push(item2)
												let data = [];
												let texture = [];
												this.$set(item2, 'data', data)
												this.$set(item2, 'texture', texture)
												if(item.datalist && item.datalist.length>0){
													item.datalist.forEach(item3=>{
														if (item2.top_id === item3.product_coding_id) {
															item3.data.push(item2)
															item3.texture.push(item2.texture_name)
														}
													})
												}
											}
										}else if(item2.coding_name === '定制'){
											item.textures.push(item2)
										}
									})
								}
								if(item.data && item.data.length>0){
									item.data.forEach(item2=>{
										if(item.datalist && item.datalist.length>0){
											item.datalist.forEach(item3=>{
												if (item2.top_id === item3.product_coding_id) {
													item3.data.push(item2)
													item3.texture.push(item2.texture_name)
												}
												if(item3.data && item3.data.length>0){
													item3.data.forEach(item4=>{
														let data = [];
														this.$set(item4, 'data', data)
													})
												}
											})
										}
									})
								}
								if(item.data && item.data.length>0){
									item.data.forEach(item2=>{
										if(item.datalist && item.datalist.length>0){
											item.datalist.forEach(item3=>{
												if(item3.data && item3.data.length>0){
													item3.data.forEach(item4=>{
														if (item2.top_id === item4.product_coding_id) {
															item4.data.push(item2);
															item3.texture.push(item2.texture_name) //增加材质
														}
													})
												}
											})
										}
									})
								}
								objlist.push(item);
							})
						}
						this.objdata.order_list = objlist;
						console.log(9999,this.objdata.order_list)
						this.$forceUpdate() //二维数组，开启强制渲染
					}
				})
			},
			//取消
			cancel() {
				this.show = false
				this.showtip = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
			//清空
			clear() {
				this.params.mark = '';
			},
			checkmore(){
				this.unfold = !this.unfold
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;
	
		.w-tit {
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: left;
			padding: 0 30rpx;
		}
	
		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
	
			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}
	
			.w-but-txt:last-of-type {
				border-right: none;
			}
		}
	
		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
	
			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				color: $font-color-3;
			}
	
			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;
	
				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}
	
				.input-row-w {
					padding:20rpx 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
				}
			}
		}
	}
	.page-content{
		display: flex;
		flex-direction: column;
		.page-foot2{
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: $border-color-blue;
			display: flex;
			justify-content: center;
			align-items: center;
			.page-foot-but{
				font-size: 36rpx;
				font-weight: bold;
				line-height: 100rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		.page-foot1{
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: #f5f5f5;
			.page-foot-l{
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				.box-foot-l{
					display: flex;
					align-items: center;
					.box-foot-l-b{
						width: 46rpx;
						height: 46rpx;
						background: #198FFF;
						border-radius: 4rpx;
						color: #fff;
						line-height: 44rpx;
						text-align: center;
					}
					.box-foot-l-img{
						width: 46rpx;
						height: 46rpx;
						bborder-radius: 4rpx;
						margin-right: 14rpx;
					}
				}
			}
			.page-foot-r{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				line-height: 100rpx;
				font-weight: bold;
				color:$font-color-w;
				text-align: center;
				.page-foot-r-b{
					flex: 1;
					background: #FE5252;
				}
				.page-foot-r-t{
					flex: 1;
					background: #198FFF;
				}
			}
		}
		.page-top{
			display: flex;
			flex-direction: column;
			.loadMore{
			    display: flex;
			    justify-content: center;
			    color: $font-color-3;
			    font-size: 26rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: $uni-bg-color-grey;
			    .sel-input-icon{
			        margin-left: 8rpx;
			        font-size: 26rpx;
			        transform:rotate(-90deg);
			        -ms-transform:rotate(-90deg); 	/* IE 9 */
			        -moz-transform:rotate(-90deg); 	/* Firefox */
			        -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
			        -o-transform:rotate(-90deg);
			    }
			    .sel-input-icon2{
			        margin-left: 8rpx;
			        font-size: 26rpx;
			        transform:rotate(90deg);
			        -ms-transform:rotate(90deg); 	/* IE 9 */
			        -moz-transform:rotate(90deg); 	/* Firefox */
			        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
			        -o-transform:rotate(90deg);
			    }
			}
		}
		.page-body{
			display: flex;
			flex-direction: column;
			padding: 40rpx 30rpx;
			margin-bottom: 50rpx;
			.page-body-title{
				font-size: 32rpx;
				font-weight: 400;
				height: 36rpx;
				line-height: 36rpx;
				color: $font-color-3;
				border-left: 6rpx solid #198FFF;
				color: $font-color-3;
				padding-left: 20rpx;
			}
		}
	}
</style>
